<template>
    <el-form :model="form" label-width="auto" style="max-width: 1000px" :rules="rules">
        <br>
        <table>
            <tr>
                <td>
                    <el-form-item label="测定日期" style="width: 400px">
                        <el-col :span="10" >
                            <el-date-picker v-model="form.conditionDate" type="date" placeholder="请选择入职日期"
                            style="width: 330px" />
                        </el-col>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="猪只耳号" clearable style="width: 400px">
                    <el-select v-model="form.basicInforId" placeholder="请选择">
                        <el-option v-for="basic in BasicInformationList" :label="basic.earNumber" :value="basic.basicInforId" />
                    </el-select>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="牙齿咬合" >
                        <el-select v-model="form.occlusion" placeholder="请选择">
                            <el-option label="正常" value="正常" />
                            <el-option label="错齿" value="错齿" />
                        </el-select>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="毛发" >
                        <el-select v-model="form.hair" placeholder="请选择">
                            <el-option label="1分" value="1分" />
                            <el-option label="2分" value="2分" />
                            <el-option label="3分" value="3分" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="色斑" >
                        <el-select v-model="form.spot" placeholder="请选择">
                            <el-option label="1分" value="1分" />
                            <el-option label="2分" value="2分" />
                            <el-option label="3分" value="3分" />
                        </el-select>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="蹄颜色" >
                        <el-select v-model="form.hoofColor" placeholder="请选择">
                            <el-option label="1分" value="1分" />
                            <el-option label="2分" value="2分" />
                            <el-option label="3分" value="3分" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="嘴颜色" >
                        <el-select v-model="form.mouthColor" placeholder="请选择">
                            <el-option label="1分" value="1分" />
                            <el-option label="2分" value="2分" />
                            <el-option label="3分" value="3分" />
                        </el-select>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="耳" >
                        <el-select v-model="form.pigEar" placeholder="请选择">
                            <el-option label="有耳" value="1分" />
                            <el-option label="无耳" value="2分" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="脂肪分布" >
                        <el-select v-model="form.fatDistribution" placeholder="请选择">
                            <el-option label="1分" value="1分" />
                            <el-option label="2分" value="2分" />
                            <el-option label="3分" value="3分" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
        </table>
        <el-form-item>
            <el-button style="margin-left: 350px;width:100px" type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();

onMounted(()=>{
    GetBasicInformation();//耳号
})
//用户添加信息
const form = reactive({
    conditionDate: '',
    basicInforId: '',//耳号
    occlusion: '',
    hair: '',
    spot: '',
    hoofColor: '',
    mouthColor: '',
    pigEar:'',
    fatDistribution: '',
    createdOwner: localStorage.getItem("userName"),
})
// 定义验证规则
const rules = reactive({

});
//品相测定添加
const onSubmit = () => {
    axios.post(apiBedinUrl+'/api/Conditions/AddCondition',form)
    .then(res=>{
        if(res.data.code==0)
        {
            console.log("品相测定",res.data);
            ElMessage.success('品相测定添加成功');
            router.push('/ShowCondition');
        }
        else{
            ElMessage.error('品相测定添加失败');
            return;
        }
    })
}

//猪只信息耳号列表
const BasicInformationList:any = ref([]);
const GetBasicInformation = () => {
    axios.post(apiBedinUrl+'/api/Infancies/GetBasicInformation', {})
        .then(res => {
            console.log("猪只信息耳号", res.data.data);
            BasicInformationList.value = res.data.data;
        })
}
</script>
